<template>
	<view>
		<view class="temp-content">
			<view class="temp-detail">
				<view>当前模式:{{currentModeStr}}</view>
				<view>当前温度:{{currentTemp}}℃</view>
			</view>
		</view>
		<view class="operate-content">
			<button class="btn-operate" style="width: 48%;" @click="open">开启空调</button>
			<button class="btn-operate" style="width: 48%;" @click="close">关闭空调</button>
		</view>
		<view class="operate-content">
			<button class="btn-operate" style="width: 48%;" @click="addTemp">+</button>
			<button class="btn-operate" style="width: 48%;" @click="subTemp">-</button>
		</view>
		<view class="control-content">
			<view class="control-detail" @click="setMode(0)">
				<image src="/static/zidong.png" style="width: 60rpx;height: 60rpx;"/>
				<text>自动</text>
			</view>
			<view class="control-detail" @click="setMode(1)">
				<image src="/static/zhileng.png" style="width: 60rpx;height: 60rpx;"/>
				<text>制冷</text>
			</view>
			<view class="control-detail" @click="setMode(2)">
				<image src="/static/zhire.png" style="width: 60rpx;height: 60rpx;"/>
				<text>制热</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				deviceId: null,
				currentMode: 0,
				currentTemp: 26,
				currentModeStr: "自动"
			}
		},
		onLoad(options) {
			let that = this;
			that.deviceId = options.deviceId;
			that.setCurrentMode();
		},
		onShow() {
			let that = this;
			that.setCurrentMode();
		},
		methods: {
			open(){
				let that = this;
				that.controlAir(that.deviceId,1,that.currentMode,that.currentTemp);
			},
			close(){
				let that = this;
				that.controlAir(that.deviceId,0,that.currentMode,that.currentTemp);
			},
			addTemp(){
				let that = this;
				that.currentTemp = that.currentTemp + 1;
				that.controlAir(that.deviceId,1,that.currentMode,that.currentTemp);
			},
			subTemp(){
				let that = this;
				that.currentTemp = that.currentTemp - 1;
				that.controlAir(that.deviceId,1,that.currentMode,that.currentTemp);
			},
			setCurrentMode(){
				let that = this;
				if(that.currentMode == 0){
					that.currentModeStr = "自动";
				}
				if(that.currentMode == 1){
					that.currentModeStr = "制冷";
				}
				if(that.currentMode == 2){
					that.currentModeStr = "制热";
				}
			},
			setMode(mode){
				let that = this;
				that.currentMode = mode;
				that.setCurrentMode();
				that.controlAir(that.deviceId,1,that.currentMode,that.currentTemp);
			},
			async controlAir(deviceId,controlType,mode,temp) {
				let params = {
					deviceId: deviceId,
					controlType: controlType,
					mode: mode,
					temp: temp
				}
				let data = await Api.apiCall('get', Api.qsg.controlAir, params);
				if (data) {
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}
			},
		}
	}
</script>

<style>
    .temp-content{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		flex-wrap: nowrap;
		background-color: #FF3333;
		color: #FFFFFF;
		height: 400rpx;
		width: 100%;
		text-align: center;
		
	}
	
	.operate-content{
		margin-top: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		
		button{
			flex: 1;
			width: 200rpx;
		}
	}
	
	.control-content{
		margin-top: 30rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
	}
	
	.control-detail{
		flex: 1;
		width: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		image{
			flex: 1;
		}
		
		text{
			flex: 1;
		}
	}
</style>
